<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖案例</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script>
        /*
        分析：
            1. 给开始按钮绑定单击事件
                1.1 定义循环定时器
                1.2 切换小相框的src属性
                    * 定义数组，存放图片资源路径
                    * 生成随机数。数组索引

            2. 给结束按钮绑定单击事件
                1.1 停止定时器
                1.2 给大相框设置src属性
        */

        var imgs = ["./img/man00.jpg",
                    "./img/man01.jpg",
                    "./img/man02.jpg",
                    "./img/man03.jpg",
                    "./img/man04.jpg",
                    "./img/man05.jpg",
                    "./img/man06.jpg"];
        //开始定时器的id
        var startId;
        //随机角标
        var index;

        $(function () {
            //处理按钮是否可以使用的效果
            $("#startID").prop("disabled", false);
            $("#stopID").prop("disabled", true);

            //1. 给开始按钮绑定单击事件
            $("#startID").click(function () {
                // 1.1 定义循环定时器 20毫秒执行一次
                startId = setInterval(function () {
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled", true);
                    $("#stopID").prop("disabled", false);

                    //1.2生成随机角标 0-6
                    //0.000--0.999 --> * 7 --> 0.0-----6.9999
                    index = Math.floor(Math.random() * 7);
                    //1.3设置小相框的src属性
                    $("#img1ID").prop("src", imgs[index]);
                }, 30);
            });

            //2. 给结束按钮绑定单击事件
            $("#stopID").click(function () {
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);

                // 1.1 停止定时器
                clearInterval(startId);
                // 1.2 给大相框设置src属性
                $("#img2ID").prop("src",imgs[index]).hide();
                //显示1秒之后
                $("#img2ID").show(1000);
            });
        });


    </script>
</head>
<body>
    <!-- 小像框 -->
    <div style="border-style:dotted;width: 160px;height: 100px">
        <img id="img1ID" src="./img/man00.jpg" style="width: 160px;height: 100px">
    </div>

    <!-- 大像框 -->
    <div style="border-style: double;width: 700px;height: 500px;position: absolute;left: 500px; top: 20px;">
        <img id="img2ID" src="./img/man00.jpg" width="700px" height="500px">
    </div>

    <!-- 开始按钮 -->
    <input id="startID" type="button" value="点击开始" style="width:150px;height: 100px; font-size: 20px;">

    <!-- 停止按钮 -->
    <input id="stopID" type="button" value="点击停止" style="width:150px;height: 150px;font-size: 20px">
</body>
</html>